<template>
    <el-dialog :title="details.title" :visible.sync="showDialog" width="30%" :showAdd="showAdd" class="hide_scroll"
    @close="$emit('update:showAdd', false)">
        <!-- <el-alert :title="alert.title" v-if="isVisibleAlert" :type="alert.dynamicVariant" :description="alert.successMessage" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged" fade-transition show-icon></el-alert> -->
        <el-form :model="form">
            <el-form-item :label='$t("rangeAdd.range_code") + ":"' :label-width="formLabelWidth">
                <el-input v-model="form.range_code" autocomplete="off" :width="formLabelWidth"></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item :label='$t("rangeAdd.from")' :label-width="formLabelWidth">
                <el-col :span="4">
                    <!-- <el-input v-model="form.range_from" autocomplete="off"></el-input> -->
                    <el-input-number v-model="form.range_from" :min="0" :max="1000000"></el-input-number>
                     
                </el-col>
            </el-form-item>
            <el-form-item :label='$t("rangeAdd.to")' :label-width="formLabelWidth">
                <el-col :span="4">
                   <el-input-number v-model="form.range_to" :min="0" :max="1000000"></el-input-number>
                </el-col>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item :label='$t("rangeAdd.status")' :label-width="formLabelWidth">
                <el-switch
                    v-model="form.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="1"
                    inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
        <!-- <el-form :model="form"> {{$t("rangeAdd.range_tab." + details.range.type)}}
            <el-form-item :label='$t("rangeAdd.type")' :label-width="formLabelWidth">
                <el-input v-model="details.range.type" :value='$t("rangeAdd.range_tab." + details.range.type)' autocomplete="off" :width="formLabelWidth" disabled></el-input>
            </el-form-item>
        </el-form> -->
        <span slot="footer" class="dialog-footer">
            <el-button :size="button.size" @click="handleCancel">{{$t("rangeAdd.cancel")}}</el-button>
            <el-button type="primary" :size="button.size" @click="handleSubmit">{{$t("rangeAdd.save")}}</el-button>
        </span>
    </el-dialog>
</template>


<script>
export default {
    name: 'AddRange',
     props: {
        showAdd: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        details: {
            type: Object
        }
    },
    data() {
        return {
            showDialog: this.showAdd,
            button: {
                size: 'small'
            },
            form: {
                range_code: '',
                range_from: '',
                range_to: '',
                status: '',
                type: '',
                action: 'Add'
            },
            alert: {
                title: '',
                dismissCountDown: 0,
                dynamicVariant: false,
                successMessage: '',
                message: ''
            },
            formLabelWidth: '100px'
        }
    },
    methods: {
        handleSubmit( event ){
            let range_list = []
            let rangeMatch = false
            let rangeMatchType = 3
            let store_range = this.details.range.type === 0 ? this.$store.state.range.range_collection.list : this.$store.state.range.range_payment.list 

            let data = {
                range_code: this.form.range_code,
                range_from: this.form.range_from,
                range_to: this.form.range_to,
                status: this.form.status,
                type: this.details.range.type,
                action: this.form.action
            }
            
            if (store_range) {
                range_list = store_range
                range_list = range_list.filter(r => r.range_code === data.range_code)
                
                if (range_list.length) {
                    rangeMatch = true
                    range_list.forEach(element => {
                        if (element.type === parseInt(data.type)) {
                            rangeMatchType = element.type
                        }
                    })
                }
                range_list = range_list.length > 0 ? range_list.filter(r => 
                                                (this.between(data.range_from, r.range_from, r.range_to) || this.between(data.range_to, r.range_from, r.range_to)) && 
                                                (this.between(r.range_from, data.range_from, data.range_to) || this.between(r.range_to, data.range_from, data.range_to)))
                                                : range_list
            }

            if (data.range_code !== '') {
                if (data.range_from > 0 && (data.range_to > 0 && data.range_to > data.range_from)) {
                    if (rangeMatch === true && rangeMatchType === parseInt(data.type)) {
                        this.handleErrorMessage(event, 'warning', this.handleMessage(data.range_code, 0))
                    }else if (data.range_code !== '') {
                        this.$emit('ok', data)
                        this.$emit('update:showAdd', false)
                        this.showDialog = false
                    }else {
                        this.handleErrorMessage(event, 'error', this.handleMessage('', 1))
                    }
                }else{
                    this.handleErrorMessage(event, 'info', this.handleMessage('', 2))    
                }
            }else {
                this.handleErrorMessage(event, 'info', this.handleMessage('', 3))
            }
        },
        handleMessage(value, flag) {
            let message = ''
            switch(flag) {
                case 0: 
                    message = this.$t('rangeAdd.range_code').concat(' ',value, this.$t('rangeAdd.error_exists'))
                    break
                case 1:
                    message = this.$t('rangeAdd.error_add')
                    break
                case 2:
                    message = this.$t('rangeAdd.error_fromto')
                    break
                case 3:
                    message = this.$t('rangeAdd.error_empty')
                    break
            }
            return message
        },       
        handleCancel() {
            this.showDialog = false
        },
        handleErrorMessage(event, dynamicVariant, message) {
            event.preventDefault();
            this.$message({message: message, type: dynamicVariant})
        },
        between(x, min, max) { 
            return x >= min && x <= max;
        }
    },
    watch: {
      showChange() {
        this.showDialog = this.showAdd
      }
    }
}
export const enRangeAdd = { 
    //General
    range_code: 'Range Code',
    from: 'From:',
    to: 'To:',
    status: 'Status:',
    type: 'Type:',  
    range_tab: {
        0: 'Collection',
        1: 'Payment'
    },  

    //Actions
    save: 'Save',
    cancel: 'Cancel',

    //Dialogue
    content: 'Are you sure to close this dialog?',

    //Error Message
    error_exists: ' already exists!',
    error_add: 'Error on adding new range. Please try again!',
    error_fromto: 'Please check the range from and to.',
    error_empty: 'Please input a range code.'
}

export const zhRangeAdd = {
    //General
    range_code: '范围代码:',
    from: '从:',
    to: '至:',
    status: '状态:',
    type: '类型:',  
    range_tab: {
        0: '采集',
        1: '付款'
    },

    //Actions
    save: '保存',
    cancel: '取消',

    //Dialogue
    content: '你确定要关闭这个对话框?',

    //Error Message
    error_exists: ' 已经存在!',
    error_add: '添加新范围时出错。请再试一次!',
    error_fromto: '请检查从和到的范围',
    error_empty: '请输入范围代码'
}
</script>

<style>
  .hide_scroll{
    overflow-y: auto !important;
  }
</style>
